<template>
  <div class="echarts-root">
    <div :id="ecahrtId" style="width: 100%" :style="{ height: cHeight }"></div>
  </div>
</template>

<script setup>
//普通折线图
import * as echarts from "echarts";
import { onMounted } from "vue";

const ecahrtId = "echartsBarDom" + Math.floor(Math.random() * 10000);

const props = defineProps({
  // 图表高度，带单位
  cHeight: {
    type: String,
    default: "170px",
  },
  list: {
    type: Array,
    default: () => {
      return [];
    },
  },
  //标题是否显示
  titleBoolean: {
    type: Boolean,
    default: false,
  },
  //标题内容
  title: {
    type: String,
    default: "标题",
  },
});

watch(
  () => props.list,
  (value) => initEcharts(value)
);
console.log(" props.list", props.list);
//图表对象
var echartsObj = null;

//初始化图表
const initEcharts = (seriesDatas = []) => {
  let echartsDom = document.getElementById(ecahrtId);
  echarts.dispose(echartsDom);
  echartsObj = echarts.init(echartsDom);
  let option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      right: "right",
    },
    series: [
      {
        // name: "Access From",
        type: "pie",
        radius: ["50%", "80%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 12,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: "压力监测点" },
          { value: 735, name: "流量计监测" },
          { value: 580, name: "电动阀" },
        ],
      },
    ],
  };

  echartsObj.setOption(option);

  window.addEventListener("resize", () => {
    if (echartsObj) {
      echartsObj.resize();
    }
  });
};

onMounted(() => {
  initEcharts();
});
</script>

<style lang="scss" scoped>
.echarts-root {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>